<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <!-- slides -->
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img class="swiper-img"
                     :src=item.imgUrl />
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>

</template>

<script>
export default {
  name: 'HeaderSwiper',
  // 组件数据
  data () {
    return {
      swiperList: [{
        id: 1,
        imgUrl: 'https://source.qunarzz.com/site/images/wap/home/recommend/iphoneplus/20180716_wap_11043.jpg'
      }, {
        id: 2,
        imgUrl: 'https://source.qunarzz.com/site/images/wap/home/recommend/iphoneplus/dujia_shuqi_banner_20180710.jpg'
      }, {
        id: 3,
        imgUrl: 'https://source.qunarzz.com/site/images/wap/home/recommend/iphoneplus/anquan_20180716.png'
      }],
      swiperOption: {
        pagination: {
          el: '.swiper-pagination',
          dynamicBullets: true
        },
        loop: true
        // some swiper options/callbacks
        // 所有的参数同 swiper 官方 api 参数
        // ...
      }
    }
  },
  // 子组件列表
  components: {},
  // 组件实例被创建之后被调用
  created () {
  },
  // 计算属性
  computed: {},
  // 方法
  methods: {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel='stylesheet/scss'>
    .wrapper {
        overflow: hidden;
        width: 100%;
        height: 0;
        padding-bottom: 25%;
        background: #eee;
        .swiper-img {
            width: 100%;
        }
    }

    .wrapper /deep/ .swiper-pagination-bullet-active {
        background: #fff !important;
    }
</style>
